<script setup>
import { computed } from 'vue'
import { InitMenuItem } from '@/assets/tools/constructors.js'
import MenuItem from '@/components/commons/base/menu/MenuItem.vue'

const props = defineProps({
  menuItems: { type: Array, default: () => [] },
  parentId: { type: String, default: '-1' },
  isCollapsed: { type: Boolean, default: false },
})

const menuTree = computed(() => {
  return props.menuItems
    .filter(item => item.parentId === props.parentId)
    .sort((a, b) => a.sort - b.sort)
})

const collapsed = computed(() => {
  return props.isCollapsed
})

// TODO: 优化代码

</script>

<template>
  <MenuItem v-for="item in menuTree" :key="item.id" v-bind="item" :is-collapsed="collapsed">
    <template #default v-if="item.isDir&&item.getChildren(menuItems).length>0">
      <MenuItemRecursion :menuItems="menuItems" :parentId="item.id" />
    </template>
  </MenuItem>
</template>

<style scoped>

</style>